<template>
  <view>
    <!-- 有数据展示 -->
    <view class="cart" v-if="cart.length>0">
      <!-- 收货地址 -->
      <my-address></my-address>
      <!-- 商品列表 -->
      <view class="top">
        <uni-icons type="shop-filled" size="20"></uni-icons>
        <text class="txt">购物车</text>
      </view>
      <!-- 滑动删除组件-->
      <view class="info">
        <uni-swipe-action>
          <block v-for="(item, index) in cart" :key="index">
            <uni-swipe-action-item :right-options="options" @click="remove(item.goods_id)">
              <my-good :item="item" :showRadio="true" :showNemBox="true" @radio-change="radioChange" @num-change="numChange"></my-good>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
      <!-- 结算区域 -->
      <view class="cart_tatol"><my_total></my_total></view>
    </view>
  <!-- 没数据展示 -->
  <view class="emply" v-else>
    <image src="../../static/images/cart_empty@2x.png" mode="aspectFit"></image>
    <text style="color: #ccc;">空空如也~</text>
  </view>
  </view>
 
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapGetters('cart', ['total']),
    ...mapState('cart', ['cart'])
  },
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }
      ]
    };
  },
  watch:{
   total(){
     uni.setTabBarBadge({
       index: 2,
       text: this.total + ''
     });
   }
  },
  onShow() {
    uni.setTabBarBadge({
      index: 2,
      text: this.total + ''
    });
  },
  methods: {
    ...mapMutations('cart', ['setChageRadio', 'ChageCount', 'removeCart']),
    // 修改选中框的值
    radioChange(e) {
      this.setChageRadio(e);
    },
    // 当修改商品数量时修改
    numChange(e) {
      console.log(e);
      this.ChageCount(e);
    },
    // 点击删除
    remove(goods_id) {
      this.removeCart(goods_id);
    }
  }
};
</script>

<style lang="scss">
.cart {
  padding-bottom: 50px;
}
.top {
  padding: 0 5px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.txt {
  margin-left: 10px;
}
.info {
  padding: 0 8px;
}
.emply{
  margin-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image{
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
  }
}
</style>
